<template>
  <div style="display: flex; align-items: center; width: 300px">
    <el-date-picker
      v-model="startDate"
      type="date"
      :clearable="false"
      style="width: 130px"
      placeholder="起始日期"
      value-format="YYYY-MM-DD"
      @change="selectStart"
    />
    <div style="padding: 0px 5px">-</div>
    <el-date-picker
      v-model="endDate"
      type="date"
      :clearable="false"
      style="width: 130px"
      placeholder="结束日期"
      value-format="YYYY-MM-DD"
      :default-value="startDate"
      :disabled-date="endDateLimit"
      @visible-change="visibleChange"
      @change="selectEnd"
    />
  </div>
</template>

<script>
  export default defineComponent({
    name: 'DateSelect',

    emits: ['get-date'],
    setup(props, { emit }) {
      const state = reactive({
        startDate: '',
        endDate: '',
        ServiceDates: '',
      })

      const selectStart = () => {
        const statDate = new Date(state.startDate).getTime()
        const endDate = new Date(state.endDate).getTime()
        console.log(statDate, '起始', endDate, '结束')
        if (statDate > endDate) {
          state.endDate = ''
        }
        if (state.startDate && state.endDate) {
          const dataList = [state.startDate, state.endDate]
          emit('get-date', dataList)
        } else {
          emit('get-date', '')
        }
      }
      const edtiTime = (startDate, endDate) => {
        state.startDate = startDate
        state.endDate = endDate
        state.ServiceDates = [startDate, endDate]
        console.log(' state.ServiceDates', ' state.ServiceDates')
      }
      const selectEnd = () => {
        if (!state.startDate) {
          state.endDate = ''
        }
        if (state.startDate && state.endDate) {
          const dataList = [state.startDate, state.endDate]
          emit('get-date', dataList)
        } else {
          emit('get-date', '')
        }
      }

      const visibleChange = (row) => {
        if (row && !state.startDate) {
          ElMessage({
            message: '请先选择起始日期！',
            type: 'warning',
          })
        }
      }
      const endDateLimit = (time) => {
        // console.log('props.dates', props.dates)
        // 不可超过开始日期
        const strDate = new Date(state.startDate).getTime()
        // console.log(strDate, 'strDatestrDatestrDate')

        return time.getTime() < strDate
      }
      const empty = () => {
        state.startDate = ''
        state.endDate = ''
      }

      return {
        ...toRefs(state),
        selectStart,
        empty,
        edtiTime,
        visibleChange,
        endDateLimit,
        selectEnd,
      }
    },
  })
</script>
